<template>
  <div>
    <div><i class="el-icon-star-on"></i>基础信息</div>
    <!-- <div class="flex">
            <div class="imgbox mt20">
                <img :src="ListData.headImg | formatImg" alt="">
                
            </div> -->
    <div class="flex3">
      <r-list
        :ColsNum="3"
        :width="120"
        :ListCols="ListCols"
        ListType="Info"
        :ListData="ListData"
      ></r-list>
    </div>
    <!-- </div>  -->
    <div class="flex_aj sb mt60 ">
      <div class="pw40 ">
        <div class="mtb20 "><i class="el-icon-star-on"></i>设备信息</div>
        <r-table
          :tableData="tableDataShebei"
          :tableCols="tableColsShebei"
          :height="100"
        ></r-table>
      </div>
      <div class="pw40">
        <div class="mtb20"><i class="el-icon-star-on"></i>下属信息</div>
        <r-table
          :tableData="tableDataXiashu"
          :tableCols="tableColsXiashu"
          :height="100"
        ></r-table>
      </div>
    </div>
    <div class="mt20"><i class="el-icon-star-on"></i>订单分成比例</div>
    <r-list
      :ColsNum="4"
      :ListCols="ListColsFencheng"
      ListType="Info"
      :ListData="ListDataFencheng"
    ></r-list>
    <div class="mt20"><i class="el-icon-star-on"></i>财务信息</div>
    <r-list
      :ColsNum="4"
      :ListCols="ListColsCaiwu"
      ListType="Info"
      :ListData="ListDataCaiwu"
    ></r-list>

    <div><i class="el-icon-star-on mt60 mb20"></i>提现信息</div>
    <ListTakecash />
  </div>
</template>
<script>
import ListTakecash from "./ListTakecash.vue";
// import ListFocus from './ListFocus.vue'
// import ListClear from './ListClear.vue'
export default {
  data() {
    return {
      //基础信息
      ListCols: [
        [
          // {
          //     label: 'headImg',
          //     prop: 'headImg',
          //     hiddenHead: true
          // },
          {
            label: "Agent Name",
            prop: "name"
          },
          {
            label: "登录账号",
            prop: "account"
          },
          {
            label: "联系方式",
            prop: "phone"
          },
          {
            label: "账号Status",
            prop: "state",
            formatter: e =>
              e.state == 1 ? "Enable" : e.state == 2 ? "Forbidden" : ""
          },
          {
            label: "经度",
            prop: "longitude"
          },
          {
            label: "纬度",
            prop: "latitude"
          },
          {
            label: "Registration Time",
            prop: "createdTime"
          },
          {
            label: "地址",
            prop: "address"
          },
          {
            label: "",
            prop: ""
          }
        ]
      ],
      ListData: {
        orderId: 1,
        headImg: "",
        orderStatus: "",
        userName: "",
        userPhone: "",
        payType: "",
        payMoney: "",
        payTime: "",
        deviceId: "",
        deviceType: "",
        agent: "",
        shop: "",
        openTime: "",
        closeTime: ""
      },
      //订单分成利润
      ListDataFencheng: {
        proportion: 0,
        proportion3: 0,
        proportion4: "0"
      },
      //订单分成利润信息
      ListColsFencheng: [
        [
          {
            label: "称重柜分成比例",
            prop: "proportion",
            formatter: e => (e.proportion == 0 ? "0" : e.proportion)
          },
          {
            label: "售袋分成比例",
            prop: "proportion3",
            formatter: e => (e.proportion3 == 0 ? "0" : e.proportion)
          },
          {
            label: "售卡分成比例",
            prop: "proportion4",
            formatter: e => (e.proportion4 == 0 ? "0" : e.proportion)
          }
        ]
      ],
      //财务Data
      ListDataCaiwu: {},
      //财务信息
      ListColsCaiwu: [
        [
          {
            label: "总收益",
            prop: "totalRevenue"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "销售总额",
            prop: "servePic"
          },
          {
            label: "生鲜柜销售额",
            prop: "cTime"
          },
          {
            label: "组合柜销售额",
            prop: "serveStatus"
          },
          {
            label: "可提Balance",
            prop: "withdrawMoney"
          },
          {
            label: "总订单数量",
            prop: "serveStatus"
          },
          {
            label: "生鲜柜订单数",
            prop: "serveStatus"
          },
          {
            label: "组合柜订单数量",
            prop: "serveStatus"
          }
        ]
      ],
      // 设备Data
      tableDataShebei: [{}],
      // 设备信息
      tableColsShebei: [
        {
          label: "设备Type",
          prop: "deveceType"
        },
        {
          label: "设备数量",
          prop: "deviceNum"
        }
      ],
      // 下属Data
      tableDataXiashu: [
        {
          wordOrder: "123",
          orderNum: "123"
        }
      ],
      // 下属信息
      tableColsXiashu: [
        {
          label: "下属Type",
          prop: "belongType"
        },
        {
          label: "数量",
          prop: "belongNum"
        }
      ]
    };
  },
  components: {
    ListTakecash
    // ListFocus,
    // ListClear
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await this.api.getreginfo(this.$route.query.id);
      if (res) {
        this.ListData = res.data.regionalAgent;
        this.ListDataFencheng = res.data.regionalAgent;
        // this.ListDataCaiwu = { ...res.data.composeBoxOrder, ...res.data.shopOrder, ...res.data.order }
        this.ListDataCaiwu = {
          totalRevenue: res.data.regionalAgent.totalRevenue,
          servePic:
            res.data.order.totalMoney + res.data.composeBoxOrder.totalMoney,
          cTime: res.data.order.totalMoney,
          serveStatus: res.data.composeBoxOrder.totalMoney,
          withdrawMoney: res.data.regionalAgent.withdrawMoney,
          serveStatus2:
            res.data.order.totalCount + res.data.composeBoxOrder.totalCount,
          serveStatus3: res.data.order.totalCount,
          serveStatus4: res.data.composeBoxOrder.totalCount
        };
        (this.tableDataShebei = [
          {
            deveceType: "自提柜",
            deviceNum: res.data.expressBoxNums
          },
          {
            deveceType: "生鲜柜",
            deviceNum: res.data.equipmentNums
          },
          {
            deveceType: "组合柜",
            deviceNum: res.data.composeBoxNums
          }
        ]),
          (this.tableDataXiashu = [
            {
              belongType: "商家",
              belongNum: res.data.regionalAgent.mchNum
            },
            {
              belongType: "补货员",
              belongNum: res.data.regionalAgent.staffNum
            },
            {
              belongType: "",
              belongNum: ""
            }
          ]);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.pw40 {
  width: 45%;
}
.imgbox {
  border: 1px solid #ebeef5;
  border-right: none;
  flex: 1;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  img {
    width: 200px;
    height: 200px;
  }
}
</style>
